<template>
  <simple-table
    :url-list="urlList"
    :current-use-btn-list="currentUseBtnList"
    :filed-property-list="filedPropertyList"
    :button-list="buttonList"
    submit-form-title="页面访问api信息"
    @before-show-table-data="beforeShowTableData"
    @different-operation="differentOperation"
  >
  </simple-table>
  <api-dialog
    ref="apiDialog"
    :api-list="apiList"
    :currentMenuId="menuId"
    v-model="apiDialogVisible"
    @close="changeApiDialogVisible"
  >
  </api-dialog>
</template>

<script lang="ts" setup>
import { TableUrl } from "@/models/TableSetting";
import FiledProperty from "@/models/FiledProperty";
import SimpleTable from "@/components/table/simple/SimpleTable.vue";
import { BtnNameEnum } from "@/components/table/simple/BtnNameEnum";
import { RuleEnum } from "@/components/form/basic/FormEnum";
import Scope from "@/models/Scope";
import { reactive, ref, Ref } from "vue";
import ApiDialog from "@/components/dialog/api/ApiDialog.vue";
import { ApiDialogEvent } from "@/components/dialog/api/ApiDialogEvent";
import DataOption from "@/components/table/simple/DataOption";

const { apiDialogVisible, changeApiDialogVisible } = ApiDialogEvent();
const urlList = {
  refreshUrl: "/basic-request/Menu/search",
  modifyingSingleUrl: "/basic-request/Menu",
  deleteUrl: "/basic-request/Menu/batch-delete",
} as TableUrl;

// 当前页面使用的功能按钮
const currentUseBtnList: BtnNameEnum[] = [
  BtnNameEnum.ADD,
  BtnNameEnum.REFRESH,
  BtnNameEnum.DELETE,
  BtnNameEnum.BATCH_IMPORT,
];
const buttonList = [
  {
    label: "调用的api",
    name: "used-api",
    icon: "view",
    type: "text",
  },
  {
    label: "功能按钮",
    name: "function-btn",
    icon: "User",
    type: "text",
  },
];
const filedPropertyList = reactive([
  {
    filedName: "id",
    label: "ID",
    span: 8,
    width: 100,
    minWidth: 100,
    showInTable: false,
    showInForm: false,
    formType: "el-form-text",
  },
  {
    filedName: "parentId",
    label: "父id",
    width: 220,
    minWidth: 120,
    showInTable: true,
    showInForm: true,
    formType: "el-form-select-dropdown",
    rules: [
      {
        ruleName: RuleEnum.REQUIRED,
        ruleValue: true,
        message: "父id不能为空",
      },
    ],
    meta: {
      optionList: [],
    },
  },
  {
    filedName: "menuOrders",
    label: "菜单项",
    width: 220,
    minWidth: 120,
    showInTable: true,
    showInForm: true,
    formType: "el-form-text",
    rules: [
      {
        ruleName: RuleEnum.REQUIRED,
        ruleValue: true,
        message: "菜单项不能为空",
      },
    ],
  },
  {
    filedName: "path",
    label: "路径",
    width: 320,
    minWidth: 120,
    align: "left",
    showInTable: true,
    showInForm: true,
    formType: "el-form-text",
    rules: [
      {
        ruleName: RuleEnum.REQUIRED,
        ruleValue: true,
        message: "路径不能为空",
      },
    ],
  },
  {
    filedName: "parentTitle",
    label: "父菜单",
    width: 220,
    minWidth: 120,
    showInTable: true,
    showInForm: false,
    formType: "el-form-text",
  },
  {
    filedName: "title",
    label: "标题",
    width: 220,
    minWidth: 120,
    showInTable: true,
    showInForm: true,
    formType: "el-form-text",
  },
  {
    filedName: "icon",
    label: "图标",
    width: 220,
    minWidth: 120,
    showInTable: true,
    showInForm: true,
    formType: "el-form-text",
  },
  {
    filedName: "createGmt",
    label: "创建时间",
    span: 8,
    minWidth: 230,
    showInTable: true,
    showInForm: false,
    formType: "el-form-picker-date",
  },
  {
    filedName: "modifiedGmt",
    label: "修改时间",
    span: 8,
    minWidth: 230,
    showInTable: true,
    showInForm: false,
    formType: "el-form-picker-date",
  },
]) as Array<FiledProperty>;
// 在渲染表格之前，计算父标题
const beforeShowTableData = (
  TableData: Ref,
  callback: (resetTableData: Record<string, unknown>) => void
) => {
  let temp = [] as Array<number>;
  TableData.value.forEach((data: Record<string, unknown>) => {
    if (data.parentId) {
      if (temp.indexOf(data.parentId as number) == -1) {
        temp.push(data.parentId as number);
      }
      for (let i = 0; i < TableData.value.length; i++) {
        if (TableData.value[i].id == data.parentId) {
          data.parentTitle = TableData.value[i].title;
          break;
        }
      }
    }
  });
  temp.sort((a: number, b: number) => {
    return a - b;
  });
  temp.forEach((item: number) => {
    filedPropertyList[1].meta?.optionList?.push({
      label: item,
      value: item,
    });
  });
  callback(TableData.value);
};

const apiDialog = ref();

const apiList = ref();
const menuId = ref();
const { data, getRecord } = DataOption();
const differentOperation = (name: string, scope: Scope) => {
  switch (name) {
    case "used-api":
      // 获取具体菜单的资源api
      getRecord("/system/selectBackendApiByMenuId/" + scope.row.id, {}).then(
        () => {
          apiList.value = data.value;
          menuId.value = scope.row.id;
        }
      );
      changeApiDialogVisible();
      apiDialog.value.clearValidateData(); // 每次打开弹窗之后清空表单规则
      break;
    case "function-btn":
      changeApiDialogVisible();
      console.log("功能按钮");
      break;
  }
};
</script>

<style scoped></style>
